<template>
	<view>
	
		    <view class="category-details-search">
		      <van-search v-model="value" shape="round" background="none" placeholder="请输入搜索关键词" @search="onSearch"/>
		    </view>
		    <view class="category-details-list" style="text-align: left">
		      <view class="material-list-grid" style="width: 45.5%" v-for="(item,index) in products" @click="toDetails(item.productId)">
		        <van-image width="10rem" height="10rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
		        <view class="material-list-grid-content">
		          <view align="left" style="background-color: gainsboro;border-radius: 1rem">
		            <van-image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem" round width="1rem" height="1rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
		            <view style="padding: 0;height: 1.5rem;line-height: 1.55rem;overflow: hidden">专业{{item.categoryName}}石家庄直营</view>
		          </view>
		          <view align="left">
		            <view>{{item.productName}}</view>
		            <view>{{item.shopsName}}</view>
		          </view>
		          <view align="left">
		            <view>
		              <text style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem">市场价</text>
		              <text style="font-weight: bolder;font-size: 1rem">￥{{item.price}}</text>
		            </view>
		          </view>
		        </view>
		      </view>
		    </view>
			

	</view>
</template>

<script>
	 import { selectProductByCateGory,selectProductByName } from '@/api/customer/local.js'
	  export default {
	    name: "category_details",
	    data(){
	      return{
	        products: [],
	        value:"",
	        title:"",
			id:"",
			name:""
	      }
	    },
	    created() {
	     this.title = name
	      this.productByCateGory(this.id)
	    },
		onLoad(opens) {
			var that = this
			that.id = opens.categoryId
			that.name = opens.categoryName
			
			console.log(opens)
		},
	    methods: {
	   
	      productByCateGory(cateGoryId){
			  console.log(cateGoryId)
			uni.request({
				url:"http://localhost:8080/api/shop/product/getSecondCateGory/"+cateGoryId,
				method:"GET",
				success: (res) => {
					console.log(res.data)
					this.products = res.data.data
				}
			})
	      },
	      toDetails(productId){
	        //this.$router.push({path:"/commodity_details",query:{commodityId:productId}});
			uni.navigateTo({
				url:'../index_commodity_details/index_commodity_details'
			})
	      },
	      onSearch(val) {
	          selectProductByName(val).then((res) => {
	                  this.products = res.data.data;
	                });
	      },
	    }
	  }
</script>

<style>
	.demo-nav{
	    position: relative;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    justify-content: center;
	    height: 45px;
	    background-color: #fff;
	    font-size: 1.1rem;
	  }
	  .demo-nav__back{
	    position: absolute;
	    top: 12px;
	    left: 16px;
	    width: 24px;
	    height: 24px;
	    cursor: pointer;
	  }
	  .category-details-list{
	    position: relative;
	    text-align: center;
	  }
	  .material-list-grid{
	    display: inline-block;
	    padding: 0.5rem;
	  }
	  .material-list-grid P,span{
	    font-size: 0.5rem;
	    padding: 0.1rem 0;
	  }
</style>
